<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TrafMon</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
        <link rel="stylesheet" href="iui/iui/iui.css" type="text/css" />
        <link rel="stylesheet" href="iui/iui/iui-moz.css" type="text/css" />
        <link rel="stylesheet" title="Default" href="iui/iui/t/default/default-theme.css" type="text/css"/>
        <link rel="stylesheet" href="iphone.css" type="text/css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
        </script>
        <script type="application/x-javascript" src="iui/iui/iui.js">
        </script>
        <script type="application/x-javascript" src="utils.js">
        </script>
        <script type="text/javascript" src="trafmon.js">
        </script>
    </head>
    <body>
        <div class="toolbar">
            <h1 id="pageTitle"></h1>
            <a id="backButton" class="button" href="#"></a>
            <a id="fwdButton" class="button" href="#"></a>
        </div>
        <div id="home" title="Home" class="panel" selected="true" fwdtitle="Start TrafMon!" fwdhref="#map_canvas">
            <h2>I'm Travelling By</h2>
            <fieldset>
                <div class="row" onclick="checkRadio('report_layer_car');hideElement('loc_tag_opts');trafmon.options.trafficLayer='car';">
                    <label>
                        Private Car
                    </label>
                    <input type="radio" id="report_layer_car" name="report_layer" value="car" checked="checked" />
                </div>
                <div class="row" onclick="checkRadio('report_layer_public');unHideElement('loc_tag_opts');trafmon.options.trafficLayer='pub';">
                    <label>
                        Public Transport 
                    </label>
                    <input type="radio" id="report_layer_public" name="report_layer" value="train" />
                </div>
            </fieldset>
            <div id="loc_tag_opts">
                <h2>Tag Your Route (optional)</h2>
                <fieldset>
                    <div class="row">
                        <input class="wide" type="text" name="movie" value="" id="location_tag" onchange="trafmon.options.locationTag=getVal('location_tag');"/>
                    </div>
                </fieldset>
            </div><h2>Contribute</h2>
            <fieldset>
                <div class="row">
                    <label>
                        Share My Location
                    </label>
                    <div class="toggle" onclick="trafmon.toggleReporting();" toggled="true" id="report_loc">
                        <span class="thumb"></span>
                        <span class="toggleOn">ON</span>
                        <span class="toggleOff">OFF</span>
                    </div>
                </div>
            </fieldset>
            <p>
                Your location will be shared anonymously.
            </p>
        </div>
        <div id="map_canvas" title="Map" fwdtitle="Options" fwdhref="#options">
            <div style="margin: 150px 40px 40px 0px;width:100%;text-align:center;">
                <img src="images/loading.gif" />
                <p>
                    Loading Map...
                </p>
            </div>
        </div>
        <div id="options" title="Options" class="panel" fwdtitle="About" fwdhref="#about">
            <h2>Traffic Types</h2>
            <fieldset>
                <div class="row">
                    <label>
                        Private Cars
                    </label>
                    <div class="toggle" onclick="trafmon.toggleShowCars();" toggled="true" id="show_cars">
                        <span class="thumb"></span>
                        <span class="toggleOn">ON</span>
                        <span class="toggleOff">OFF</span>
                    </div>
                </div>
                <div class="row">
                    <label>
                        Public Transport
                    </label>
                    <div class="toggle" onclick="trafmon.toggleShowPub();" toggled="true" id="show_pub">
                        <span class="thumb"></span>
                        <span class="toggleOn">ON</span>
                        <span class="toggleOff">OFF</span>
                    </div>
                </div>
            </fieldset>
            <h2>Traffic Times</h2>
            <fieldset>
                <div class="arow last" id="day_opt_row">
                    <a href="#day" id="day_opt"><b>Live Traffic</b></a>
                </div>
                <div class="arow" style="display:none" id="time_opt_row">
                    <a href="#time" id="time_opt">Time of Day</a>
                </div>
            </fieldset>
        </div>
        <ul id="day" title="Day of Week">
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,0)"><b>Live Traffic</b></a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,2)">Monday</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,3)">Tuesday</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,4)">Wednesday</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,5)">Thursday</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,6)">Friday</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,7)">Saturday</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setDayOpt(this,1)">Sunday</a>
            </li>
        </ul>
        <ul id="time" title="Time of Day">
            <li>
                <a href="_back" onclick="trafmon.setTimeOpt(this,0)">Early Morning (12 AM - 6 AM)</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setTimeOpt(this,1)">Morning Peak (6 AM - 9 AM)</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setTimeOpt(this,2)">Daytime (9 AM - 4:30 PM)</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setTimeOpt(this,3)">Afternoon Peak (4:30 PM - 7 PM)</a>
            </li>
            <li>
                <a href="_back" onclick="trafmon.setTimeOpt(this,4)">Evening (7 PM - 12 AM)</a>
            </li>
        </ul>
        <div id="about" title="About" class="panel">
            <img src="images/logo.png" /><h2>Project Information</h2>
            <p>
                Trafmon is an open source web application for iPhone and iPod Touch designed to crowdsource live traffic congestion data using geolocation features.
            </p>
            <h2>Important Privacy Information</h2>
            <p>
                TrafMon collects and stores data about your location and speed, including the dates and times when you use the application. All information is <b>completely anonymous</b>
                and we never identify individual iPhone or iPod Touch users based on this information.
            </p>
            <h2>Credits</h2>
            <p>
                Stephen Chester, Paul Coster and Simon Whitehead. 
            </p>
            <h2>Project Technologies</h2>
            <ul>
                <li>
                    <b>Google Maps API v3:</b>
                    optimised for mobile devices
                </li>
                <li>
                    <b>iUi:</b>
                    an iPhone-style web interface library by Joe Hewitt
                </li>
                <li>
                    <b>W3C Geolocation API:</b>
                    supported by Apple Mobile Safari
                </li>
                <li>
                    <b>db4o:</b>
                    object-oriented database engine
                </li>
                <li>
                    <b>Apache Tomcat:</b>
                    Java Servlet web server platform
                </li>
                <li>
                    <b>Google Code:</b>
                    open source project hosting and SVN repository
                </li>
            </ul>
        </div>
    </body>
</html>
